<template>
  <div>
    <!--主窗口-->
    <div class="main">
      <div class="container">
        <div class="info">
          <h1>丿丿树 读书笔记</h1>
          <h2>基于uni-app及小程序的超级前端框架</h2>
          <p>GraceUI 是一套基于 uni-app 及微信小程序的优秀前端框架，提供了丰富的组件、布局及界面库，会大幅度提高您的开发速度。</p>
          <p>GraceUI 来自于近五年的上百个小程序及APP项目总结，我们是一线开发者，深度地参与项目开发，所以能够为您提供优质的框架。</p>
          <p>GraceUI 使用用户过万，通过大量开发者的使用、测试、反馈加上我们长期的高频更新，框架已经非常稳定！值得信赖和托付。</p>
          <button @click="toLibrary">开始</button>
        </div>
        <div class="pic">
          <img src="@/assets/svg/数据时代.svg" alt="ce"/>
        </div>
      </div>
    </div>
    <!--特征信息-->
    <div class="feature">
      <div class="row">
        <div class="row-left">
          <img src="@/assets/svg/书籍_book.svg" alt="">
          <div class="text">
            <h1 style="font-size: 20px;margin-bottom: 6px;">多端兼容 </h1>
            <span style="letter-spacing: 2px;color: cadetblue;">基于uni-app方式可以实现一套代码多端发布。同时在样式规划方面考虑周全不影响在项目内使用其他框架及插件。</span>
          </div>
        </div>
        <div class="row-right">
          <img src="@/assets/svg/美化_optimize.svg" alt="">
          <div class="text">
            <h1 style="font-size: 20px;margin-bottom: 6px;">多端兼容 </h1>
            <span style="letter-spacing: 2px;color: cadetblue;">基于uni-app方式可以实现一套代码多端发布。同时在样式规划方面考虑周全不影响在项目内使用其他框架及插件。</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="row-left">
          <img src="@/assets/svg/优秀_good-one.svg" alt="">
          <div class="text">
            <h1 style="font-size: 20px;margin-bottom: 6px;">多端兼容 </h1>
            <span style="letter-spacing: 2px;color: cadetblue;">基于uni-app方式可以实现一套代码多端发布。同时在样式规划方面考虑周全不影响在项目内使用其他框架及插件。</span>
          </div>
        </div>
        <div class="row-right">
          <img src="@/assets/svg/建筑_building-four.svg" alt="">
          <div class="text">
            <h1 style="font-size: 20px;margin-bottom: 6px;">多端兼容 </h1>
            <span style="letter-spacing: 2px;color: cadetblue;">基于uni-app方式可以实现一套代码多端发布。同时在样式规划方面考虑周全不影响在项目内使用其他框架及插件。</span>
          </div>
        </div>
      </div>

    </div>

    <!--页脚-->
    <div class="footer">
      <span>本站所有内容版权归 ppsyyds.cn 所有 未经允许不得转载。</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {}
  },
  methods: {
    toLibrary(){
      this.$router.push({
        path: '/library'
      })
    }
  }
}
</script>

<style scoped>

.main{
  margin-top: 3px;
  height: 500px;
  background-color: #fff;
}

.main .container {
  width: 1200px;
  margin: 0 auto;
}

.main .container::after {
  display: block;
  content: '';
  clear: both;
}

.main .container .info{
  width: 400px;
  float: left;
  margin-top: 100px;
}
.main .container .info h1{
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 10px;
}
.main .container .info h2{
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 10px;
}
.main .container .info p{
  font-size: 14px;
  font-weight: 320;
  margin-bottom: 5px;
}
.main .container .info button{
  margin-top: 2px;
  width: 200px;
  height: 50px;
  font-size: 15px;
  background-color: #3284fa;
  color: #fff;
  border-radius: 5px;
  user-select: none;
}
.main .container .info button:hover{
  cursor: pointer;
}
.main .container .pic {
  width: 600px;
  height: 500px;
  line-height: 500px;
  float: right;
  user-select: none;
}


.feature {
  width: 1000px;
  margin: 0 auto;
}

.feature .row {
  width: 100%;
  height: 150px;
  margin: 40px 0;
}
.feature .row::after {
  display: block;
  content: '';
  clear: both;
}
.feature .row .row-left {
  border-radius: 5px;
  float: left;
  width: 456px;
  height: 150px;
  background-color: #fff;
}
.feature .row .row-right {
  border-radius: 5px;
  float: right;
  width: 456px;
  height: 150px;
  background-color: #fff;
}

.feature .row .row-left:hover {
  box-shadow: 0 0 30px 1px rgba(188, 186, 186, 0.3);
}

.feature .row .row-right:hover {
  box-shadow: 0 0 30px 1px rgba(188, 186, 186, 0.3);
}

.feature .row .row-left:hover img{
  opacity: 1;
}

.feature .row .row-right:hover img{
  opacity: 1;
}

.feature .row .row-left::after {
  display: block;
  content: '';
  clear: both;
}

.feature .row .row-left img {
  width: 30%;
  height: 80px;
  padding-top: 30px;
  float: left;
  user-select: none;
  opacity: 0.5;
}
.feature .row .row-left .text {
  width: 60%;
  margin: 30px auto;
  float: left;
}

.feature .row .row-right::after {
  display: block;
  content: '';
  clear: both;
}

.feature .row .row-right img {
  width: 30%;
  height: 80px;
  padding-top: 30px;
  float: left;
  user-select: none;
  opacity: 0.5;
}
.feature .row .row-right .text {
  width: 60%;
  margin: 30px auto;
  float: left;
}



.footer {
  margin-top: 80px;
  text-align: center;
  font-size: 14px;
  color: grey;
}
</style>